import React, { Component } from "react";
import { Icon, Tag } from "antd";
import "./index.css";

class Article extends Component {
  render() {
    return (
      <div className="article-page">
        <h3 className="article-title">文章标题</h3>
        <div className="article-content">
          适配前先搞清楚几个像素的概念         像素概念：        
          1)物理像素：显示器上最小的物理显示单位        
          2)设备独立像素（也叫逻辑像素）：虚拟概念，一个可以由程序使用的最小虚拟像素点（css像素）
                  3)设备像素比：也叫dpr，可以通过window.devicePixelRatio获取。  
                  设备像素比 = 物理像素 / 设备独立像素         以iphone6来说,  
                物理像素分辨率: 750 * 1334     (值越大屏幕越清晰)        
          设备独立像素分辨率 : 375 * 667
           (值越大手机屏幕越大，与屏幕直观尺寸有关)         设备像素比: 2
          适配原则：对移动端320-768进行适配，超过768采用768原则.小于320采用320原则。
          当设备宽度>768(iPad尺寸),根节点统一使用102.4px
          当设备宽度(一般手机最小尺寸)，根节点统一使用42.7px
        </div>
        <div className="row item-foot">
          <div className="item">
            <Icon type="eye" theme="twoTone" />
            <span>2508</span>
          </div>
          <div className="item">
            <Icon type="like" theme="twoTone" />
            <span>880</span>
          </div>
          <div className="item">
            <Icon type="folder" theme="twoTone" />
            <span>react</span>
          </div>
          <div className="item">
            <Icon type="tags" theme="twoTone" />
            <Tag className="tag" color="cyan">
              cyan
            </Tag>
            <Tag className="tag" color="cyan">
              cyan
            </Tag>
          </div>
        </div>{" "}
      </div>
    );
  }
}

export default Article;
